<template>
  <div class="dashboard-container">
    <h1 style="text-align: center">入住记录管理</h1>

    <el-input
      v-model="roomNumber"
      placeholder="房间号"
      name="roomNumber"
      type="text"
      clearable
      style="margin-left:20% ;width: 180px"
    />

    <el-input
      v-model="customerName"
      placeholder="顾客名称"
      name="customerName"
      type="text"
      clearable
      style="margin-left:40px ;width: 180px"
    />
    <el-input
      v-model="identificationCard"
      placeholder="身份证号"
      name="phoneNumber"
      type="text"
      clearable
      style="margin-left:40px ;width: 180px"
    />

    <el-button plain
               style="width:80px;margin-bottom:30px;margin-left:40px ;background-color: #cfefc6; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"
               @click="selectAll"
    >
      查询
    </el-button>
    <el-button
      style="width:80px;margin-bottom:30px;margin-left:40px ;background-color: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"
      @click="checkLiveRecords"
    >重置
    </el-button>
    <el-table :data="LiveRecordsList.slice((currentPage-1)*pagesize,currentPage*pagesize)" height="659px" border style="width: 100%;margin-top: 20px"
              class="elegant-room-table"
    >
      <el-table-column align="center" fixed prop="liveId" label="订单ID" width="180"/>
      <el-table-column align="center" fixed prop="customerId" label="顾客ID" width="180"/>
      <el-table-column align="center" fixed prop="customerName" label="顾客名称" width="120"/>
      <el-table-column align="center" fixed prop="identificationCard" label="身份证号" width="250"/>
      <el-table-column align="center" fixed prop="roomId" label="房间ID" min-width="180"/>
      <el-table-column align="center" fixed prop="roomNumber" label="房间号" min-width="180"/>
    </el-table>
    <div style="margin-top:5px;margin-left: 30%;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10,15,20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="LiveRecordsList.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { deleteRoomType, insert1RoomType, selectAllRoomType, updateRoomType } from '@/api/roomType'
import { insertCustomer, selectAllCustomer, updateCustomer } from '@/api/customer'
import { selectAllLiveRecords } from '@/api/liveRecords'

export default {
  name: 'user',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  data() {
    return {
      roomNumber: '',
      customerName: '',
      identificationCard: '',
      LiveRecordsList: [],
      currentPage: 1,
      currentIndex: '',
      pagesize: 10,
    }
  },
  mounted() {
    this.selectAll()
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage= val
    },
    selectAll() {
      selectAllLiveRecords({
        roomNumber: this.roomNumber,
        customerName: this.customerName,
        identificationCard: this.identificationCard
      }).then(
        response => {
          console.log(response.data)
          this.LiveRecordsList = response.data
          if((this.LiveRecordsList.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize)).length == 0){
            this.currentPage = 1
          }
        }
      )
    },
    checkLiveRecords() {
      this.roomNumber = ''
      this.customerName = ''
      this.identificationCard  = ''
      this.selectAll()
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.elegant-room-table {
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;

  &::before {
    display: none;
  }

  .price-tag {
    display: inline-block;
    padding: 3px 8px;
    color: #171717;
    border-radius: 12px;
    font-weight: 500;
  }
}
</style>
